<template>
    <div class="home-container">
        <FloatingBox ref="fBox">
            <van-search shape="round" @focus="handleSearch">
                <template #right-icon>
                    <div class="scan-btn" @click.stop="handleScan">
                        <i class="iconfont icon-scan"></i>
                    </div>
                </template>
            </van-search>
        </FloatingBox>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import FloatingBox from '@/components/FloatingBox.vue'
const fBox = ref();
const $router = useRouter();

const handleSearch = () => {
    // fBox.value.full();
    $router.push('/search');
}

const handleScan = () => {
    // 打开scan页面
    $router.push('/scan');
}

</script>
<style scoped lang="scss">
.home-container {
    pointer-events: none;
    background-color: transparent !important;
}
.scan-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
    i {
        font-size: 40px;
        color: #333;
        font-weight: bold;
    }
}
</style>